<style type="text/css">


.titulo_centro {
	font-family:Arial, Helvetica, sans-serif;
	text-align:center;
	width: 100%;
}

.titulo_centro  a {
	text-decoration:underline;	
	color: black;
}

.centro_azul {
	width: 400px; 
	height: 300px;
	margin-left: 36.3%;
}

#contrato{
	text-align:center;
	font-size:12px;
	color: black;
	padding-top: 50px;
}

#editadados{
	text-align:center;
	font-size:16px;
	color: white;
	padding-top: 20px;
	font-weight:600;
}
.centro_azul > form {
	width: 100%;
	text-align:center;
	color: black;
}

#form_edita_usuario{
	margin-top: 10px;
	padding: 0px;
	width: 100%;	
}

#cadastro_usuario {
	margin-bottom: 20px;
	margin-left: 20px;	
	float:left;
}

#cadastro_usuario > input{
	margin-top: 15px;
}

#dados_usuario {
	margin-top: 20px;
	margin-left: 20px;	
}

#dados_usuario > input{
	width: 230px;
}

input[type = "text"] , input[type = "password"]  {
	text-align:center;
	width:180px;
	height: 18px;
	margin-top: 8px;
}

.separador {
	margin-top: 30px;
	position:relative;
	clear: both;
}

#img_usuario {
	
	width: 140px; 
	padding-top: 10px;
	padding-bottom: 10px;	
	position: relative; 
	float:right; 
	
}

#img_usuario > input{
	margin-top: 15px;	
}



</style>

<script type="text/javascript">

$(document).ready(function() { 

	preencheInformacoesUser('<?php echo json_encode($usuarioLogado); ?>');	

	//Cadastrar usuario
	$("#form_edita_usuario").submit(function(event) {

		event.preventDefault();		
		editarUsuario();		
	});
});

</script>

<script type="text/javascript">
function formatar_mascara(src, mascara) {
 var campo = src.value.length;
 var saida = mascara.substring(0,1);
 var texto = mascara.substring(campo);
 if(texto.substring(0,1) != saida) {
 src.value += texto.substring(0,1);
 }
}

</script>

<script language='JavaScript'>
function SomenteNumero(e){
    var tecla=(window.event)?event.keyCode:e.which;   
    if((tecla>47 && tecla<58)) return true;
    else{
    	if (tecla==8 || tecla==0) return true;
	else  return false;
    }
}
</script>

<form  method="post" name="form_edita_usuario" id="form_edita_usuario">
	<div id="login_main" class="centro_azul borda-arredondada" style=" position:relative; z-index: 3; margin-top: 30px;">

	  <span class="titulo_centro">
	  	<p align="center" id="editadados">Editar Dados</p>
	  </span>
	    
	  <div id="img_usuario" >		  
		  <img id="imgusuario" src = "../Content/user_avail.png" width="90" height="90" align="right" style="margin-right: 28px; margin-top: 50px;" alt="Adicione sua foto" onclick="document.getElementById('imgInp').click()" />
		  <input hidden type="file" id="imgInp" onchange="leArquivo(this, 90, 90, '80px')"  />		
	  </div>
      <!--<div id="cadastro_usuario" style="width: 190px;">
        
        <input type="text" 	   name="" id="dslogin" maxlength="20" placeholder = "Login" title="Informe o Login" required x-moz-errormessage="Informe o Login" autofocus />
        <input type="password" name="dssenha" id="dssenha" maxlength="50" placeholder = "Senha" title="Informe a Senha" required x-moz-errormessage="Informe a Senha" />
        <input type="password" name="dssenha_confirma" id="dssenha_confirma" maxlength="50" placeholder = "Confirme a Senha" title="Confirme a Senha" onblur="validarSenha(this)" required />           
              
      </div>
     
		<div id="separador_cadastro_usuario" class="separador"></div>                 -->

        <div id="dados_usuario" style="width: 240px;">
        
          <input hidden id="dslogin" />
       	  <input type="text" name="dsnome" id="dsnome" placeholder = "Nome" title="Informe o Nome" required x-moz-errormessage="Informe o Nome"/>
          <input type="text" name="dsemail" id="dsemail" placeholder = "Email" title="Informe o Email" required x-moz-errormessage="Informe o Email"/>
          <input type="text" name="dsendere" id="dsendere" placeholder = "Endereço" title="Informe o Endereço" required x-moz-errormessage="Informe o Endereço"/>
          <select name="dsuf" id="dsuf" style="width:70px;" required>
		  <?php
		
		  require_once ('../Controller/busca_estados.php');
		  
		  for ($x = 1; $x <= count($estados); $x++) {
		  	echo '<option value="'.$estados[$x].'">'.$estados[$x].'</option>';
		  }		  
		  ?>
		  </select>
		  		   
		  <input type="text" name="nmcidade" id="nmcidade" placeholder = "Cidade" style="width: 155px;" title="Informe a Cidade" required x-moz-errormessage="Informe a Cidade"/>
                      											
		   <input type="text" name="dsbairro" id="dsbairro" style="width: 121px;" placeholder = "Bairro" title="Informe o Bairro" required x-moz-errormessage="Informe o Bairro"/>
          		  
		  <input onkeypress="formatar_mascara(this,'#####-###') ; return SomenteNumero(event)"  maxlength="9" type="text" name="nrdcep" id="nrdcep" placeholder = "Cep" style="width: 100px;" title="Informe o CEP" required x-moz-errormessage="Informe o CEP"/>
         
		  <select name="cdTipoTelefone" id="cdTipoTelefone" style="width:125px;">
			<option value="1">Residencial</option> 
			<option value="2">Comercial</option> 					
		  </select>
		 
           <input maxlength="9" onkeypress="formatar_mascara(this,'####-####') ; return SomenteNumero(event)"  type="text" name="nrtelefo" id="nrtelefo" style="width: 100px;" placeholder = "Telefone" title="Informe o Telefone" required x-moz-errormessage="Informe o Telefone"/>
	      
        </div>
                
	</div>

	<div id="login_confirma" class="centro_azul borda-arredondada" style="background-color: rgb(192, 192, 192); position: absolute; margin-top: -15px; height: 90px; margin-left: 36.3%; z-index: 1" >
		<p align="center" style=" margin-top: 25px;">
			<button type="submit" name="concluir" class="btn" style="border:0px; background-color:transparent;">
				<img src = "../Content/aprovar.png" width="59" height="59" />
			</button>
		</p>
	</div>
</form>